<script setup>

</script>

<template>
    <div id="app">
      <h2>{{ themeTitle }}</h2><br>
      <label for="username">用户名:</label>
      <input type="text" id="username" v-model="username"><br>
      <label for="password"> 密 码:</label>
      <input type="password" id="password" v-model="password"><br>
      <label for="captcha">验证码:</label>
      <input type="text" id="captcha" v-model="captcha"><br>
      <button @click="login">Login</button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      themeTitle: '出租车辆监管系统',
      username: '',
      password: '',
      captcha: ''
    };
  },
  methods: {
    login() {
      console.log('Username:', this.username);
      console.log('Password:', this.password);
      console.log('Captcha:', this.captcha);
    }
  }
};
</script>

<style scoped>

#app {
  background-color: #ffffff;
  margin: 200px auto;
  text-align: center;
  width: 300px;
  height: 300px;
  padding: 30px 50px 30px 50px;
  border: solid 1px #999;
  border-radius: 50px;
}
</style>
